<template>
  <div class="doctor-container">
    <div class="header">
      
        <div class="myicon">
          <img src="../assets/images/hospital.jpg" alt="" class="left-img" />
              <div class="mytitle">
                医+系统
            </div>
          <el-dropdown>
              <span>{{doctorName}}医生，您好</span>
            <img
              style="width: 60px; height: 60px; border-radius: 50px;"
              src="../assets/images/ch.jpg"
              alt=""
            />
             
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="setPass"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

  
          <el-menu
            @select="handleSelect"
            mode="horizontal"
            background-color="rgb(107, 159, 255)"
            text-color="#fff"
               class="mymenu"
          >
            <el-menu-item
              v-for="(item, index) in menuList"
              :index="item.path"
              :key="index"
           
            >
              {{ item.mate.title }}
            </el-menu-item>
          </el-menu>
 
        <router-view></router-view>
    </div>
  </div>

</template>

<script>
import routerList from "../router/index.js";

export default {
  name: "doctorMain",
  comName: "医生界面",
  data() {
    return {
      menuList: [],
       doctorName:sessionStorage.getItem("doctorName"),
    };
  },
  methods: {
    exit() {
      sessionStorage.removeItem("Token");
      sessionStorage.removeItem("doctorId");
      sessionStorage.removeItem("doctorName");
      this.$router.replace({
        path: "/home/home",
      });
    },
    setPass() {
      this.$router.push({
        path: "/doctorPassword",
      });
    },
    handleSelect(value) {
            if (this.$route.path === value) {
        return  
      }
      this.$router.push({
        path: value,
      });
    },
  },
  mounted() {
    let routes = [...routerList.options.routes[1].children];
    this.menuList = routes.sort((prev, next) => {
      return prev.mate.sort - next.mate.sort;
    });
  },
};
</script>

<style lang="scss" scoped>
.doctor-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 100px;

    .myicon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 30px;
    }

    .mymenu {
   
 .el-menu-item {
         font-size: 16px;
         margin-right: 30px;
         margin-left: 30px;
         font-weight:bold;
             letter-spacing: 5px;
         background: rgb(107, 159, 255);
 }
    
   
    }

    .left-img {
      width: 150px;
      height: 90px;
    }
  }
}

        .mytitle{
             line-height: 90px;
            font-size: 30px;
            color: rgb(113, 157, 223);
            font-weight: bolder;

        }


</style>